<template>
  <div class="product-mg">
    <el-container>
      <el-header
        style="padding: 0px;display:flex;justify-content:space-between;align-items: center"
      >
        <div style="display: inline" class="search-p">
          <!-- <el-input
            placeholder="请输入产品名称"
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="productName"
          ></el-input> -->
          <el-select
              v-model="productName"
              filterable
              remote
              multiple
              :reserve-keyword="true"
              :disabled="advanceSearchViewVisible"
              @keyup.enter.native="searchEmp"
              placeholder="请输入产品名称"
              :remote-method="inputProductNameMethod"
              :loading="inputProductNameLoading"
              @change="productNameChange" clearable>
              <el-option
                v-for="item in productNameArray"
                :key="item.productId"
                :label="item.productName+' '+item.productNo"
                :value="item.productName"
              >
              </el-option>
          </el-select>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 5px"
            icon="el-icon-search"
            @click="searchEmp"
          >搜索</el-button>
          <el-button
            slot="reference"
            type="primary"
            size="mini"
            style="margin-left: 5px"
            @click="showAdvanceSearchView"
          >
            <i
              class="fa fa-lg"
              v-bind:class="[
                advanceSearchViewVisible ? faangledoubleup : faangledoubledown
              ]"
              style="margin-right: 5px"
            ></i>高级搜索
          </el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddEmpView">添加产品</el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <transition name="slide-fade">
            <div
              style="margin-bottom: 10px;border: 1px;border-radius: 5px;border-style: solid;padding: 5px 0px 5px 0px;box-sizing:border-box;border-color: #20a0ff"
              v-show="advanceSearchViewVisible"
            >
              <el-row>
                <el-col :span="1" style="height:30px;"></el-col>
                <el-col :span="8" align="left">
                  <span>录入时间:</span>
                  <el-date-picker
                    v-model="inputTime"
                    size="mini"
                    type="daterange"
                    style="width: 60%"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-col>
                <el-col :span="8" align="left">
                  <span>开卖日期</span>
                  <el-date-picker
                    v-model="saleTime"
                    size="mini"
                    type="daterange"
                    style="width: 60%"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-col>
                
              </el-row>
              <el-row>
                <el-col :span="1" style="height:30px;"></el-col>
                <el-col :span="12" align="left">
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchEmp">搜索</el-button>
                  <el-button size="mini" @click="cancelSearch">取消</el-button>
                </el-col>
              </el-row>
            </div>
          </transition>
          <el-table
            :data="emps"
            v-loading="tableLoading"
            border
            stripe
            size="mini"
            style="width: 100%"
          >
            <el-table-column prop="productName" align="left" fixed label="产品名称" width="120"></el-table-column>
            <el-table-column prop="saleDate" align="left" fixed label="产品开卖日期" width="90"></el-table-column>
            <el-table-column prop="firstReceiptData" width="120" align="left" label="第一笔到账日"></el-table-column>
            <el-table-column prop="lastReceiptData" width="120" align="left" label="最后一笔到账日"></el-table-column>
            <el-table-column prop="standardCoefficient" width="120" align="left" label="第一年折标系数"></el-table-column>
            <el-table-column prop="standardCoefficientSub" width="120" align="left" label="第二年折标系数"></el-table-column>
            <el-table-column prop="standardCoefficientSub3" width="120" align="left" label="第三年折标系数"></el-table-column>
            <el-table-column prop="standardCoefficientSub4" width="120" align="left" label="第四年折标系数"></el-table-column>
            <el-table-column prop="pcFeeFormulaCn" label="服务费计算公式" width="160"></el-table-column>
            <el-table-column width="85" align="left" label="预期收益率">
              <template slot-scope="scope">
                <span @click="lookThing(scope.$index)">查看</span>
              </template>
            </el-table-column>
            <el-table-column width="150" label="预期退出日">
              <template slot-scope="scope">
                {{
                scope.row.actualInvestmentExitDateCn
                ? scope.row.actualInvestmentExitDateCn
                : scope.row.lastInvestmentExitDateCn
                }}
              </template>
            </el-table-column>
            <el-table-column width="120" label="资产转让总价款（万）">
              <template slot-scope="scope">
                {{
                scope.row.totalAssets / 10000
                }}
              </template>
            </el-table-column>
            <el-table-column prop="productType" label="产品类型(1+X/普通产品)" width="150">
              <template slot-scope="scope">
                {{
                scope.row.productType == 0 ? "普通产品" : "1+X产品"
                }}
              </template>
            </el-table-column>
            <el-table-column width="300" align="left" label="募集账户" show-overflow-tooltip>
              <template slot-scope="scope">
                <p>户名： {{ scope.row.accountName }}</p>
                <p>账号：{{ scope.row.accountNo }}</p>
                <p>开户行：{{ scope.row.openAccountBank }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="earlyReminderTime" width="120" label="提前提醒时间"></el-table-column>
            <el-table-column prop="createdTime" align="left" width="160" label="产品录入时间"></el-table-column>
            <el-table-column width="100" align="left" prop="createdBy" label="产品录入人"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="showEditEmpView(scope.row)"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  type="warning"
                >修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: center;margin: 40px 0">
            <el-pagination
              background
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="totalCount"
            ></el-pagination>
          </div>
          <div
            style="margin:30px 0;"
            class="fw tc"
          >共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        </div>
      </el-main>
    </el-container>
    <el-form :model="emp" :rules="rules" ref="addEmpForm" style="margin: 0px;padding: 0px;">
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px;"
          @close="closeModal"
          :visible.sync="dialogVisible"
          width="1200px"
          :loading="tableLoading">
          <el-row>
            <el-col :span="7">
              <div>
                <el-form-item label="产品名称:" prop="productName">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.productName"
                    size="mini"
                    style="width: 60%"
                    placeholder="请输入产品名称"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>
                <el-form-item label="服务费公式:" prop="pcFeeFormula">
                  <el-select
                    v-model="emp.pcFeeFormula"
                    placeholder="请选择"
                    size="mini"
                    @change="pcFeeFormulaChange"
                  >
                    <el-option
                      v-for="item in pcFeeFormulaInfo"
                      :key="item.indexVal"
                      :label="item.label"
                      style="width: 120px"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="9">
              <div>
                <el-form-item label="资产转让生效日公式:" prop="effectiveDateFormula">
                  <el-select
                    v-model="emp.effectiveDateFormula"
                    placeholder="请选择"
                    size="mini"
                    @change="effectiveDateFormulaChange"
                  >
                    <el-option
                      v-for="item in effectiveDateFormulaInfo"
                      :key="item.indexVal"
                      :label="item.label"
                      style="width: 120px"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div>
                <el-form-item label="第一年折标系数:" prop="standardCoefficient">
                  <el-input
                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                    prefix-icon="el-icon-edit"
                    v-model="emp.standardCoefficient"
                    size="mini"
                    style="width: 180px"
                    placeholder="请输入第一年折标系数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-form-item label="第二年折标系数:">
                  <el-input
                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                    prefix-icon="el-icon-edit"
                    v-model="emp.standardCoefficientSub"
                    size="mini"
                    style="width: 180px"
                    placeholder="请输入第二年折标系数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div>
                <el-form-item label="第三年折标系数:">
                  <el-input
                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                    prefix-icon="el-icon-edit"
                    v-model="emp.standardCoefficientSub3"
                    size="mini"
                    style="width: 180px"
                    placeholder="请输入第三年折标系数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-form-item label="第四年折标系数:">
                  <el-input
                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                    prefix-icon="el-icon-edit"
                    v-model="emp.standardCoefficientSub4"
                    size="mini"
                    style="width: 180px"
                    placeholder="请输入第四年折标系数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="预期收益公式:" prop="incomFromInvestmentFormula">
                  <el-select
                    v-model="emp.incomFromInvestmentFormula"
                    placeholder="请选择"
                    size="mini"
                    @change="incomFromInvestmentFormulaChange"
                  >
                    <el-option
                      v-for="item in incomFromInvestmentFormulaInfo"
                      :key="item.indexVal"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="产品编号:" prop="productNo">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.productNo"
                    size="mini"
                    style="width: 60%"
                    placeholder="产品编号"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="到期类型:">
                  <el-select
                    v-model="emp.exitType"
                    placeholder="请选择"
                    size="mini"
                    @change="exitTypeChange"
                  >
                    <el-option
                      v-for="item in exitTypeArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="预期退出天数:" prop="lastInvestmentExitDate">
                  <el-input
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    v-model="emp.lastInvestmentExitDate"
                    size="mini"
                    style="width: 50%"
                    placeholder="预期退出天数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8" v-if="emp.exitType=='00'">
              <div>
                <el-form-item label="实际最迟退出天数:">
                  <el-input
                    :disabled="dialogTitle === '录入产品'"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                    v-model="emp.actualInvestmentExitDate"
                    size="mini"
                    style="width: 50%"
                    placeholder="实际最迟退出天数"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8" v-if="emp.exitType=='01'">
              <div>
                <el-form-item label="实际最迟退出日期:">
                  <el-date-picker
                    :disabled="dialogTitle === '录入产品'"
                    v-model="emp.actualInvestmentExitTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="实际最迟退出日期">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="确认书类型:">
                  <el-select
                    v-model="emp.confirmationLetter"
                    placeholder="请选择"
                    size="mini"
                    @change="confirmationLetterTypeChange"
                  >
                    <el-option
                      v-for="item in confirmationLetterTypeArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="资产转让总价款:" prop="totalAssets">
                  <el-input
                    onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                    prefix-icon="el-icon-edit"
                    v-model="emp.totalAssets"
                    size="mini"
                    style="width: 60%"
                    placeholder="资产转让总价款"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <span>产品开卖日期:</span>
              <el-date-picker
                v-model="emp.saleDate"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="账户名:" prop="accountName">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.accountName"
                    size="mini"
                    style="width: 60%"
                    placeholder="账户名"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="账号:" prop="accountNo">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.accountNo"
                    size="mini"
                    style="width: 60%"
                    placeholder="账号"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="开户行:" prop="openAccountBank">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.openAccountBank"
                    size="mini"
                    style="width: 60%"
                    placeholder="开户行"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="提前提醒时间:" prop="earlyReminderTime">
                  <el-input
                    prefix-icon="el-icon-edit"
                    v-model="emp.earlyReminderTime"
                    size="mini"
                    style="width: 50%"
                    placeholder="提前提醒时间"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="addEmp('addEmpForm')">确 定</el-button>
            <el-button size="mini" @click="cancelEidt">取 消</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
    <el-dialog title="预期收益率" :visible.sync="dialogSaleShow">
      <el-table :data="gridData" border>
        <el-table-column property="money" label="受让资产总额（万元）"></el-table-column>
        <el-table-column label="资产预期年化一期收益率（%/年）">
          <template slot-scope="scope">{{ scope.row.year }}%</template>
        </el-table-column>
      </el-table>
      <el-table :data="gridData2" border v-if="gridData2.length >= 1">
        <el-table-column property="money" label="受让资产总额（万元）"></el-table-column>
        <el-table-column label="资产预期年化二期收益率（%/年）">
          <template slot-scope="scope">{{ scope.row.year }}%</template>
        </el-table-column>
      </el-table>
      <el-table :data="gridData3" border v-if="gridData3.length >= 1">
        <el-table-column property="money" label="受让资产总额（万元）"></el-table-column>
        <el-table-column label="资产预期年化三期收益率（%/年）">
          <template slot-scope="scope">{{ scope.row.year }}%</template>
        </el-table-column>
      </el-table>
      <el-table :data="gridData4" border v-if="gridData4.length >= 1">
        <el-table-column property="money" label="受让资产总额（万元）"></el-table-column>
        <el-table-column label="资产预期年化四期收益率（%/年）">
          <template slot-scope="scope">{{ scope.row.year }}%</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputTime: "", // 录入时间
      saleTime: "", // 开卖时间
      entryName: "", // 录入人
      productName: "", // 产品名称
      productIdList:[],
      productNameArray:[],
      inputProductNameLoading:false,
      dialogSaleShow: false, // 收益率弹框显示
      pageSize: 10,
      gridData: [],
      gridData2: [],
      gridData3: [],
      gridData4: [],
      emps: [],
      keywords: "",
      beginDateScope: "",
      faangledoubleup: "fa-angle-double-up",
      faangledoubledown: "fa-angle-double-down",
      dialogTitle: "",
      multipleSelection: [],
      depTextColor: "#c0c4cc",
      nations: [],
      politics: [],
      positions: [],
      joblevels: [],
      totalCount: 1,
      currentPage: 1,
      deps: [],
      defaultProps: {
        label: "name",
        isLeaf: "leaf",
        children: "children"
      },
      dialogVisible: false,
      tableLoading: false,
      advanceSearchViewVisible: false,
      showOrHidePop2: false,
      pcFeeFormulaInfo: [],
      effectiveDateFormulaInfo:[
        {
          label: "T+1",
          value: 1
        },
        {
          label: "T+3",
          value: 3
        }
      ],
      incomFromInvestmentFormulaInfo: [],
      exitTypeArr:[{label:"按天数退出",value:"00"},{label:"按日期退出",value:"01"}],
      confirmationLetterTypeArr:[{label:"A",value:"A"},{label:"B",value:"B"}],
      productTypeArr: [
        {
          label: "普通产品",
          value: "0"
        },
        {
          label: "1+X产品",
          value: "1"
        }
      ],
      emp: {
        accountName: "",
        productName: "", // 产品名称
        standardCoefficient: "",
        standardCoefficientSub:"",
        standardCoefficientSub3:"",
        standardCoefficientSub4:"",
        effectiveDateFormula:"",
        pcFeeFormula: "",
        pcFeeName: "",
        incomFromInvestmentName: "",
        incomFromInvestmentFormula: "",
        lastInvestmentExitDate: "",
        productNo: "",
        exitType:"00",
        confirmationLetter:"A",
        totalAssets: "",
        productType: "",
        earlyReminderTime: "",
        actualInvestmentExitDate: "",
        actualInvestmentExitTime:"",
        accountNo: "",
        openAccountBank: "",
        saleDate: ""
      },
      rules: {
        productName: [
          { required: true, message: "必填:产品名称", trigger: "blur" }
        ],
        accountName: [
          { required: true, message: "必填:账户名", trigger: "blur" }
        ],
        standardCoefficient: [
          { required: true, message: "必填:折标系数", trigger: "blur" }
        ],
        pcFeeFormula: [
          { required: true, message: "必填:服务费公式", trigger: "change" }
        ],
        effectiveDateFormula:[
          { required: true, message: "必填:资产转让生效日公式", trigger: "change" }
        ],
        incomFromInvestmentFormula: [
          { required: true, message: "必填:预期收益率", trigger: "change" }
        ],
        productType: [
          { required: true, message: "必填:产品类型", trigger: "change" }
        ],
        lastInvestmentExitDate: [
          { required: true, message: "必填:预期退出日", trigger: "blur" }
        ],
        productNo: [
          { required: true, message: "必填:	产品编号", trigger: "blur" }
        ],
        totalAssets: [
          { required: true, message: "必填:资产转让总价款", trigger: "blur" }
        ],
        accountNo: [{ required: true, message: "必填:账号", trigger: "blur" }],
        openAccountBank: [
          { required: true, message: "必填:开户行", trigger: "blur" }
        ]
      },
    };
  },
  mounted: function() {
    this.loadEmps();
    this.getRequest(
      "/formula/getListByType?formulaType=ASSETS_ADVISER_ADVISER"
    ).then(resp => {
      if (resp && resp.status == 200) {
        resp.data.obj.forEach((v, i) => {
          this.pcFeeFormulaInfo.push({
            label: v.formulaName,
            value: v.formulaId + "",
            indexVal: v.formulaId,
            realVal: v.formulaInfo
          });
        });
      }
    });
    this.getRequest(
      "/formula/getListByType?formulaType=INCOM_FROM_INVESTMENT"
    ).then(resp => {
      if (resp && resp.status == 200) {
        resp.data.obj.forEach((v, i) => {
          this.incomFromInvestmentFormulaInfo.push({
            label: v.formulaName,
            value: v.formulaId + "",
            indexVal: v.formulaId,
            realVal: v.formulaInfo
          });
        });
      }
    });
  },
  methods: {
    pcFeeFormulaChange(val) {
      this.pcFeeFormulaInfo.forEach((v, i) => {
        if (v.value === val) {
          this.emp.pcFeeName = v.label;
        }
      });
    },
    effectiveDateFormulaChange(val){
      this.emp.effectiveDateFormula =val;
    },
    incomFromInvestmentFormulaChange(val) {
      this.incomFromInvestmentFormulaInfo.forEach((v, i) => {
        if (v.value === val) {
          this.emp.incomFromInvestmentName = v.label;
        }
      });
    },
    exitTypeChange(val){
      this.emp.exitType=val
      this.emp.actualInvestmentExitDate="";
      this.emp.actualInvestmentExitTime="";
    },
    confirmationLetterTypeChange(val){
      this.emp.confirmationLetter=val;
    },
    closeModal() {
      this.dialogVisible = false;
      this.emptyEmpData();
      this.loadEmps();
    },
    openDialog() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: `action: ${action}`
          });
        }
      });
    },
    lookThing(index) {
      this.dialogSaleShow = true;
      this.gridData = [];
      this.gridData2 = [];
      this.gridData3 = [];
      this.gridData4 = [];
      let result = JSON.parse(this.emps[index].incomFromInvestmentFormula);
      if (!(result.formulaType.indexOf("_1_X") > -1)) {
        result.formulaInfo.profitRateList.forEach((v, i) => {
          this.gridData.push({
            money: v.condition,
            year: v.profitRate
          });
        });
      } else {
        result.formulaList.forEach((item, idx) => {
          if (idx === 0) {
            item.profitRateList.forEach((v, i) => {
              this.gridData.push({
                money: v.condition,
                year: v.profitRate
              });
            });
          } else if(idx === 1) {
            item.profitRateList.forEach((v, i) => {
              this.gridData2.push({
                money: v.condition,
                year: v.profitRate
              });
            });
          }else if(idx == 2 ){
            item.profitRateList.forEach((v, i) => {
              this.gridData3.push({
                money: v.condition,
                year: v.profitRate
              });
            });
          }else if(idx == 3 ){
            item.profitRateList.forEach((v, i) => {
              this.gridData4.push({
                money: v.condition,
                year: v.profitRate
              });
            });
          }
        });
      }
    },
    cancelSearch() {
      this.advanceSearchViewVisible = false;
      this.emptyEmpData();
      this.beginDateScope = "";
      this.loadEmps();
    },
    showAdvanceSearchView() {
      this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
      this.keywords = "";
      if (!this.advanceSearchViewVisible) {
        this.currentPage = 1;
        this.emptyEmpData();
        this.beginDateScope = "";
        this.loadEmps();
      }
    },
    searchEmp() {
      let startTime = "";
      let endTime = "";
      let startSaleDate="";
      let endSaleDate="";
      if(this.inputTime){
        startTime = this.inputTime[0];
        endTime = this.inputTime[1];
      }
      if (this.saleTime) {
        startSaleDate = this.saleTime[0];
        endSaleDate = this.saleTime[1];
      }
      this.currentPage = 1;
      this.loadEmps({
        productIdList: this.productIdList,
        startTime,
        endTime,
        startSaleDate,
        endSaleDate,
      });
    },
    currentChange(currentChange) {
      this.currentPage = currentChange;
      this.loadEmps();
    },
    loadEmps(options) {
      var _this = this;
      this.tableLoading = true;
      this.postRequest("/input/product/mg", {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        ...options
      }).then(res => {
        if (res.status == "200") {
          this.tableLoading = false;
          _this.emps = res.data.obj.rows;
          _this.totalCount = res.data.obj.total;
        }
      });
    },
    addEmp(formName) {
      console.log(this.emp)
      var _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.emp.pcFeeFormula = this.pcFeeFormulaInfo.filter(item => {
            return item.indexVal == this.emp.pcFeeFormula;
          });
          this.emp.pcFeeFormula = this.emp.pcFeeFormula[0].realVal;

          this.emp.incomFromInvestmentFormula = this.incomFromInvestmentFormulaInfo.filter(
            item => {
              return item.indexVal == this.emp.incomFromInvestmentFormula;
            }
          );
          this.emp.incomFromInvestmentFormula = this.emp.incomFromInvestmentFormula[0].realVal;

          if (this.emp.actualInvestmentExitDate == null) {
            this.emp.actualInvestmentExitDate = "";
          }
          if (this.emp.productId) {
            //更新
            this.tableLoading = true;
            this.putRequest("/input/product/update", this.emp).then(resp => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.dialogVisible = false;
                _this.emptyEmpData();
                _this.loadEmps();
              }
            });
          } else {
            //添加
            this.tableLoading = true;
            this.putRequest("/input/product/insert", this.emp).then(resp => {
              _this.tableLoading = false;
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.dialogVisible = false;
                _this.emptyEmpData();
                _this.loadEmps();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelEidt() {
      this.dialogVisible = false;
      this.emptyEmpData();
    },
    async showEditEmpView(row) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑产品";
      this.emp = row;
      this.emp.earlyReminderTime ? this.emp.earlyReminderTime : "";
      this.emp.actualInvestmentExitDate
        ? this.emp.actualInvestmentExitDate
        : "";
      this.emp.pcFeeFormula = this.pcFeeFormulaInfo.filter(item => {
        return this.emp.pcFeeName == item.label;
      });
      this.emp.pcFeeFormula = this.emp.pcFeeFormula[0].value;
      this.emp.incomFromInvestmentFormula = this.incomFromInvestmentFormulaInfo.filter(
        item => {
          return this.emp.incomFromInvestmentName == item.label;
        }
      );
      this.emp.incomFromInvestmentFormula = this.emp.incomFromInvestmentFormula[0].value;
    },
    showAddEmpView() {
      this.dialogTitle = "录入产品";
      this.dialogVisible = true;
    },
    // 输入产品名称
    inputProductNameMethod(query){
      if (query !== "") {
        this.inputProductNameLoading = true;
        this.postRequest("/common/get_product_info",{
          searchContent:query
        }).then(
          resp => {
            if (resp && resp.data.status == 200) {
              this.productNameArray = resp.data.obj;
            }
            this.inputProductNameLoading = false;
          }
        );
      } else {
        this.productNameArray = [];
      }
    },
    // 产品名称发生变化
    productNameChange(e){
      var that = this;
      if (e == "") {
        this.productIdList=[];
      } else {  
        this.productIdList=[];
        for(let i=0;i<e.length;i++){  
          this.postRequest("/common/get_product_info",{
            searchContent:e[i]
          }).then(
          resp => { 
            if (resp && resp.data.status == 200) {
              this.productIdList.push(resp.data.obj[0].productId)
            }
          }
        );
        }
      }
    },
    emptyEmpData() {
      this.emp = {
        accountName: "",
        productName: "", // 产品名称
        standardCoefficient: "",
        standardCoefficientSub:"",
        standardCoefficientSub3:"",
        standardCoefficientSub4:"",
        effectiveDateFormula:"",
        pcFeeFormula: "",
        pcFeeName: "",
        incomFromInvestmentName: "",
        incomFromInvestmentFormula: "",
        lastInvestmentExitDate: "",
        productNo: "",
        totalAssets: "",
        productType: "",
        accountNo: "",
        openAccountBank: "",
        earlyReminderTime: "",
        actualInvestmentExitDate: "",
        actualInvestmentExitTime: "",
        saleDate: "",
        exitType:"00",
        confirmationLetter:"A",
      };
    }
  }
};
</script>
<style scoped>
.el-input{
  width: 180px;
}
.product-mg .el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.el-dialog__body .el-table {
  margin-bottom: 10px;
}

.product-mg .slide-fade-enter-active {
  transition: all 0.8s ease;
}

.product-mg .el-row {
  margin-bottom: 10px;
}

.product-mg .slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.product-mg .slide-fade-enter,
.product-mg .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
